<template>
  <div class="admin-layout">
    <!-- 顶部导航栏 -->
    <header class="admin-header">
      <div class="logo">
        <router-link to="/admin">
          <h1>CarbonSpark 管理系统</h1>
        </router-link>
      </div>
      <div class="header-actions">
        <router-link to="/" class="home-button">
          <i class="icon-home"></i>
          <span>返回首页</span>
        </router-link>
        <div class="admin-user">
          <span class="user-avatar">
            <img src="@/assets/admin-avatar.png" alt="管理员头像" v-if="false">
            <div class="avatar-placeholder" v-else>
              <span>{{ userInitials }}</span>
            </div>
          </span>
          <span class="user-name">管理员</span>
          <div class="dropdown-menu">
            <div class="dropdown-item" @click="handleLogout">退出登录</div>
          </div>
        </div>
      </div>
    </header>

    <div class="admin-container">
      <!-- 侧边导航栏 -->
      <aside class="admin-sidebar">
        <nav class="sidebar-menu">
          <div class="menu-title">主导航</div>
          <ul class="menu-list">
            <li class="menu-item" :class="{ active: currentPath === '/admin/dashboard' }">
              <router-link to="/admin/dashboard">
                <i class="menu-icon icon-dashboard"></i>
                <span>控制台</span>
              </router-link>
            </li>
            <li class="menu-item" :class="{ active: currentPath.includes('/admin/challenges') }">
              <router-link to="/admin/challenges">
                <i class="menu-icon icon-challenges"></i>
                <span>挑战管理</span>
              </router-link>
            </li>
            <li class="menu-item" :class="{ active: currentPath.includes('/admin/users') }">
              <router-link to="/admin/users">
                <i class="menu-icon icon-users"></i>
                <span>用户管理</span>
              </router-link>
            </li>
          </ul>

          <div class="menu-title">系统管理</div>
          <ul class="menu-list">
            <li class="menu-item" :class="{ active: currentPath.includes('/admin/settings') }">
              <router-link to="/admin/settings">
                <i class="menu-icon icon-settings"></i>
                <span>系统设置</span>
              </router-link>
            </li>
            <li class="menu-item" :class="{ active: currentPath.includes('/admin/logs') }">
              <router-link to="/admin/logs">
                <i class="menu-icon icon-logs"></i>
                <span>系统日志</span>
              </router-link>
            </li>
          </ul>

          <div class="menu-title">内容管理</div>
          <ul class="menu-list">
            <li class="menu-item" :class="{ active: currentPath.includes('/admin/articles') }">
              <router-link to="/admin/articles">
                <i class="menu-icon icon-articles"></i>
                <span>文章管理</span>
              </router-link>
            </li>
            <li class="menu-item" :class="{ active: currentPath.includes('/admin/points') }">
              <router-link to="/admin/points">
                <i class="menu-icon icon-points"></i>
                <span>积分商城</span>
              </router-link>
            </li>
            <li class="menu-item" :class="{ active: currentPath.includes('/admin/feedback') }">
              <router-link to="/admin/feedback">
                <i class="menu-icon icon-feedback"></i>
                <span>用户反馈</span>
              </router-link>
            </li>
          </ul>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="admin-content">
        <div class="content-header">
          <div class="breadcrumb">
            <span>首页</span>
            <span class="separator">/</span>
            <span>{{ pageName }}</span>
          </div>
        </div>
        <div class="content-body">
          <slot></slot>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminLayout',
  data() {
    return {
      userInitials: 'A',
      pageName: '控制台'
    }
  },
  computed: {
    currentPath() {
      return this.$route.path
    }
  },
  watch: {
    '$route.path': {
      handler(path) {
        this.updatePageName(path)
      },
      immediate: true
    }
  },
  methods: {
    updatePageName(path) {
      if (path.includes('/admin/dashboard')) {
        this.pageName = '控制台'
      } else if (path.includes('/admin/challenges')) {
        this.pageName = '挑战管理'
      } else if (path.includes('/admin/users')) {
        this.pageName = '用户管理'
      } else if (path.includes('/admin/settings')) {
        this.pageName = '系统设置'
      } else if (path.includes('/admin/logs')) {
        this.pageName = '系统日志'
      } else if (path.includes('/admin/articles')) {
        this.pageName = '文章管理'
      } else if (path.includes('/admin/points')) {
        this.pageName = '积分商城'
      } else if (path.includes('/admin/feedback')) {
        this.pageName = '用户反馈'
      } else {
        this.pageName = '管理后台'
      }
    },
    handleLogout() {
      // 清除管理员登录信息
      localStorage.removeItem('adminToken');
      
      // 提示用户已退出
      this.$router.push('/admin/login');
    }
  }
}
</script>

<style scoped>
.admin-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.admin-header {
  height: 64px;
  background-color: #001529;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 10;
}

.logo {
  height: 64px;
  display: flex;
  align-items: center;
}

.logo a {
  text-decoration: none;
}

.logo h1 {
  color: white;
  font-size: 20px;
  margin: 0;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
}

.home-button {
  display: flex;
  align-items: center;
  color: white;
  padding: 0 12px;
  text-decoration: none;
}

.home-button:hover {
  color: #1890ff;
}

.admin-user {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: white;
  padding: 0 12px;
}

.user-avatar {
  margin-right: 8px;
}

.avatar-placeholder {
  width: 32px;
  height: 32px;
  background-color: #1890ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 1000;
}

.admin-user:hover .dropdown-menu {
  display: block;
}

.dropdown-item {
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
  color: #1890ff;
}

.admin-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.admin-sidebar {
  width: 240px;
  background-color: #001529;
  height: calc(100vh - 64px);
  transition: all 0.3s;
  overflow-y: auto;
}

.sidebar-menu {
  padding: 16px 0;
}

.menu-title {
  color: rgba(255, 255, 255, 0.45);
  padding: 12px 24px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 20px;
}

.menu-item {
  position: relative;
}

.menu-item a {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: all 0.3s;
}

.menu-item:hover a {
  color: white;
}

.menu-item.active a {
  color: white;
  background-color: #1890ff;
}

.menu-icon {
  margin-right: 12px;
  font-size: 18px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
}

.admin-content {
  flex: 1;
  background-color: #f0f2f5;
  overflow-y: auto;
  padding: 0;
}

.content-header {
  padding: 14px 24px;
  margin-bottom: 6px;
}

.page-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.breadcrumb {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.separator {
  margin: 0 8px;
}

.content-body {
  min-height: calc(100vh - 130px);
  background-color: white;
  padding: 0;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 100%;
}

/* 菜单图标样式 */
.icon-dashboard:before { content: "📊"; }
.icon-challenges:before { content: "🏆"; }
.icon-users:before { content: "👥"; }
.icon-tasks:before { content: "📝"; }
.icon-settings:before { content: "⚙️"; }
.icon-logs:before { content: "📄"; }
.icon-articles:before { content: "📰"; }
.icon-points:before { content: "🎁"; }
.icon-feedback:before { content: "📨"; }
.icon-home:before { content: "🏠"; }
</style> 